<template>
    <div class="secondComent">
      <div class="comment-content">
        <a class="userimage">
<!--          <img :src="props.userImage" alt="">-->
          <img src="https://ts1.cn.mm.bing.net/th/id/R-C.738148bdb2da83e7bab5d7f63d1190cd?rik=usj6CNEFf1B92w&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20140311%2f20140311162033-282564199.jpg&ehk=eRgO3fxJa6CqLG1pjx7VaCyEV5qGOTFOR9r3yG1veYA%3d&risl=&pid=ImgRaw&r=0" alt="">
        </a>
        <div class="comment-info">
          <div class="username">{{ props.userId }}</div>
          <div class="message">{{ props.content }}</div>
        </div>
      </div>
      <div class="post_info">
      <span class="date">
        {{ props.time }}
        <i class="iconfont icon-lishijilu"></i>
      </span>
        <span class="like" :class="{ 'liked': isLiked }" @click="toggleLike">
        <i class="iconfont icon-zan"/>
        {{ isLiked ? props.likeNum+1 : props.likeNum }}
      </span>
        <span class="reply" @click="toggleReplyBox">回复</span>
      </div>
      <div v-if="showReplyBox" class="reply_box">
        <textarea ref="replyBoxRef" draggable="false" v-model="replyContent" placeholder="写下你的回复..."></textarea>
        <el-button @click="postReply">发表回复</el-button>
      </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick, defineProps } from 'vue';
import SecondLevelComment from './SecondLevelComment.vue';
import VideoApi from "@/apis/VideoApi.js";
import {ElMessage} from "element-plus";

// {
//   "id": 10,
//     "user_id": 3,
//     "video_id": 10,
//     "comment_id": 0,
//     "time": "Feb 6, 2025, 9:12:52 PM",
//     "comment_content": "asdffew",
//     "likeNum": 0
// },


const props = defineProps({
  commentId: Number,
  userId: String | Number,
  time: String,
  content: String,
  likeNum: Number,
});

const isLiked = ref(false);

const showReplyBox = ref(false);

const replyBoxRef = ref(null)
const replyContent = ref('');

const replies = ref([]);
const showReplies = ref(false);

onMounted(async() => {
});

function toggleLike() {
  isLiked.value = !isLiked.value;
}

function toggleReplyBox() {
  showReplyBox.value = !showReplyBox.value;
  if (showReplyBox.value) {
    nextTick(() => {
      // 自动聚焦到 textarea
      document.querySelector('.reply_box textarea')?.focus();
    });
  }
}


function postReply() {
  try {
    const res = VideoApi.commentVideoComment(props.commentId, replyContent.value)
    ElMessage.success('回复成功');
  } catch (e) {
    ElMessage.error('回复失败');
  }
}

</script>

<style scoped lang="less">
.secondComent {
  background-color: white;
  position: relative;
  padding: 20px 0px 24px 42px;

  .comment-content {
    display: flex;
    align-items: flex-start;

    .userimage {
      width: 30px;
      height: 30px;
      margin-right: 12px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .comment-info {
      flex-grow: 1;

      .username {
        color: #757575;
        font-size: 14px;
        line-height: 18px;
        display: inline-block;
      }

      .message {
        margin-left: 10px;
        display: inline-block;
        color: #212121;
        font-size: 14px;
        line-height: 18px;
        word-wrap: break-word;
      }
    }
  }

  .post_info {
    color: #99a2aa;
    font-size: 0;
    margin-top: 8px;

    span {
      font-size: 14px;
      color: #999;
      text-align: left;
      display: inline-block;
      line-height: 18px;
      margin-right: 23.5px;
      cursor: pointer;

      &:hover {
        color: #00a1d6;
      }
    }

    .like {
      .iconfont {
        vertical-align: middle;
        cursor: pointer;
        color: #999;

        &:hover {
          color: #00a1d6;
        }
      }
    }

    .liked {
      color: rgb(102.2, 177.4, 255);

      .iconfont {
        fill: rgb(102.2, 177.4, 255);
      }
    }
  }

  .reply_box {
    margin-top: 16px;
    position: relative;

    textarea {
      border: 1px solid #e7e7e7;
      border-radius: 2px;
      display: block;
      width: 100%;
      height: 84px;
      padding: 12px 16px;
      margin-bottom: 12px;
      word-break: break-all;
      line-height: 20px;
      color: #212121;

      &:focus,
      &:focus-visible,
      &:not(:placeholder-shown) {
        border-color: #00a1d6;
        outline: none;
      }
    }

    button {
      background-color: #00a1d6;
      color: white;
      border-radius: 2px;
      border: 1px solid #00a1d6;
      padding: 4.5px 15px;
    }
  }
}
</style>
